<template>
	<view class="page">

		<!-- <u-navbar :fixed="true" :placeholder="false" title="产品详情" :bgColor="headBackground" :autoBack="true"
			:titleStyle="{color: headTitleColor}" :leftIconColor="headTitleColor">
		</u-navbar> -->

		<!-- 轮播图 -->
		<view class="banner-box">
			<view class="banner">
				<u-swiper radius="0" circular indicator indicatorMode="line" height="400" @click="swiperClick"
					:list="banners"></u-swiper>
			</view>
		</view>

		<view class="page-ctx">
			<view class="title-wrap">
				<view class="title">
					{{info.title}}
				</view>

				<view class="subtitle">
					{{info.remark}}
				</view>

				<view class="price-info flex-between">
					<view class="price">
						<text class="value"> {{info.jifen || '0.00'}}</text>
						<text class="huobi">积分</text>
					</view>
					<view class="sale-num">
						已兑： {{info.orders || '0'}}
					</view>
				</view>
			</view>

			<view class="guige-wrap " @click="openGuigePop()">
				<view class="addr-info">

				</view>
				<view class="guige-info flex-between">
					<view class="label">
						规格
					</view>
					<view class="right flex">
						<view class="val">
							<view class="val-0" v-if="!guige_select.id">
								请选择
							</view>
							<view class="val-1" v-else>
								{{guige_select.attr_vals}} <text class="buy-num" style="margin-left: 20rpx;"> x {{buyNumber}}</text>
							</view>
						</view>
						<image src="@/static/common/arrow.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="page-bottom">
				<view class="content-ctx">
					<view class="sec-box sec-detail">
						<view class="sec-title">
							商品详情
						</view>
						<view class="detail-box">
							<view class="html-box">
								<u-parse :content="info.content" :tagStyle="richStyle"></u-parse>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<w_bottom_safe height="160" />


		<view class="page-foot">
			<view class="safe-fixed-bottom">
				<view class="grid-box flex-between">
					<view class="grid-item" @click="toPointsShopIndex()">
						<view class="icon-box">
							<image class="icon" src="@/static/product-detail/icon-home.png" mode=""></image>
						</view>
						<view class="title">
							首页
						</view>
					</view>
				</view>
				<view class="btns">
					<view class="btn flex-center btn-buy" @click="doDuihuan()">
						立即兑换
					</view>
				</view>
			</view>
		</view>

		<!-- 弹窗-产品规格  -->
		<points_sku_pop ref="points_sku_pop" position="产品详情" @confirm="confirmGuige" />
	</view>
</template>

<script>
	import points_sku_pop from "@/components/points/points_sku_pop.vue"

	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			points_sku_pop,
		},
		data() {
			return {
				headBackground: 'rgba(255,255,255,0)', //控制顶部标题栏颜色 默认透明颜色 transparent
				headTitleColor: 'rgba(255,255,255,1)',

				id: '', //产品id
				info: {
					title: '',
					remark: '',
					jifen: '',
					orders: '',
					content: '',
					banners: [],
					guigeList: [],
				},
				list_specifications: [],
				//
				banners: [],
				reviews: [],
				count: 0,
				reviews_count: 0,
				pagination: {
					page: 1,
					limit: 10
				},
				is_fav: false,
				limit_buy_num: 0, //限购数量
				//

				tabSelect: {
					title: '商品详情'
				},
				tabList: [{
						title: '商品详情',
						selector: '.sec-detail',
					},
					{
						title: '用户评价',
						selector: '.sec-reviews',
					},
				],
				richStyle: {
					// 字符串的形式
					p: 'color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;text-align:justify;',
					span: 'color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;',
					img: 'vertical-align: bottom;'
				},


				//规格信息
				guige_select: {},
				buyNumber: 1,
				//规格信息
			}
		},
		computed: {
			...mapState(['']),


			disabledBuy() {
				let ret = false;
				if (this.is_flashSale && !this.is_in_flashSale) {
					ret = true
				}
				return ret
			}
		},

		// onShareAppMessage() {
		// 	let user_info = uni.getStorageSync('user_info')
		// 	return {
		// 		title: this.info.title,
		// 		imageUrl: this.info.images[0],
		// 		path: '/pages/goods/goods_detail?invite_id=' + user_info['userId'] + '&id=' + this.info.inventoryId
		// 	}
		// },
		// onShareTimeline() {
		// 	let user_info = uni.getStorageSync('user_info')
		// 	return {
		// 		title: this.info.title,
		// 		imageUrl: this.info.images[0],
		// 		query: 'invite_id=' + user_info['userId'] + '&id=' + this.info.inventoryId,
		// 		path: '/pages/goods/goods_detail'
		// 	}
		// },

		onPullDownRefresh() {
			// this.get_info(this.goodsId)
			// setTimeout(() => {
			// 	uni.stopPullDownRefresh()
			// }, 500)
		},
		onLoad(option) {
			this.id = option.id
			this.setView()
		},

		onShow() {

		},

		onPageScroll(e) {
			console.log('滚动e', e)

			let percent = e.scrollTop / 50;
			if (percent > 1) {
				percent = 1
			}
			this.headBackground = `rgba(255,255,255,${percent})`

			if (e.scrollTop > 10) {
				this.headTitleColor = `rgba(0,0,0,${percent})`
			} else {
				this.headTitleColor = `rgba(255,255,255,1)`
			}
		},


		methods: {
			setView() {
				this.query_product()
			},

			query_product() {
				this.showLoading()
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'jiFen_pdtInfo',
						inventoryId: this.id
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;

						this.setCustomShareInfo({
							title: data.title,
							path: '/pages-pkg-shop/pages/product/product-detail',
							imageUrl: data.thumb,
							query: {
								id: this.id
							},
						});

						data.kucun = parseInt(data.kucun)
						this.info = data;
						this.banners = data.images || []
						// this.info.banners = this.banners
						//
						this.reviews = data.comment_list
						this.reviews_count = data.comment_num

						//
						this.is_fav = data.is_collection == true;
						this.limit_buy_num = data.num || 0;
						//
					}
					this.hideLoading()
				})
			},



			openGuigePop() {
				this.$refs.points_sku_pop.init(this.info)
			},


			confirmGuige(data) {
				this.$log('confirmGuige', data)

				// let {
				// 	type,
				// 	guige,
				// 	buyNumber
				// } = data;
				// if (type) {

				// }
				// if (guige.id) {
				// 	this.guige_select = guige;
				// 	this.buyNumber = buyNumber
				// }
			},

			swiperClick(index) {

			},

			toggleTab(item) {
				this.tabSelect = item;

				// .sec-xuzhi
				// .sec-detail
				// .sec-reviews
				// var window_info = uni.getWindowInfo();
				// console.log('window_info', window_info)
				// var scrollTop = 0;

				uni.pageScrollTo({
					// scrollTop: 600,
					selector: item.selector,
					duration: 300
				})
			},

			toReviews() {
				this.toRoute({
					path: '/product-review-list',
					query: {
						gid: this.id,
						pid: this.info.productId
					}
				})
			},

			toPointsShopIndex() {
				// this.toBack()
				this.toRoute({
					path: '/points-shop',
					query: {

					}
				})
			},


			doDuihuan() {
				this.openGuigePop()

				return
				if (!this.mix_checkLogin()) {
					return
				}
			},


		}
	}
</script>


<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	/deep/.u-swiper {
		overflow: auto !important;
		background-color: transparent !important;
	}

	.page {
		.page-ctx {
			padding: 24rpx 32rpx;
		}
	}

	.banner-box {
		.banner {}
	}



	.title-wrap {
		margin-top: 24rpx;
		margin-bottom: 24rpx;
		padding: 30rpx 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;


		.title {
			// display: inline-flex;
			// align-items: center;
			line-height: 1.5;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #222222;

			image {
				margin-top: 6rpx;
				margin-right: 4rpx;
				width: 56rpx;
				height: 28rpx;
			}

		}

		.subtitle {
			margin-top: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #7D7D7D;
			line-height: 1.5;
		}



		.price-info {
			.price {
				.huobi {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
				}

				.value {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}

			}

			.sale-num {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #000000;
			}
		}
	}



	.guige-wrap {
		min-height: 108rpx;
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;


		.addr-info {}

		.guige-info {}

		.label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #222222;
		}

		.right {
			.val {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #222222;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}




	::v-deep .store-item {
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 0;
	}




	.page-bottom {
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}



	.tabs-wrap {

		.tabs {
			border-bottom: 1rpx solid #eee;

			.tab-item {
				position: relative;
				padding: 33rpx 0;
				text-align: center;
				flex: 1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #222222;

				&.active {
					font-weight: bold;


					&::after {
						content: '';

						position: absolute;
						z-index: 2;
						bottom: 0;
						left: 50%;
						transform: translate(-50%);
						width: 40rpx;
						height: 6rpx;
						background: #44C4BE;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}
			}
		}
	}


	.content-ctx {
		padding: 0;

		.sec-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #222222;
		}
	}




	.sec-reviews {
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.more-box {
			text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7D7D7D;
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.reviews-box {
			margin-top: 20rpx;
			padding-bottom: 40rpx;
			// border-bottom: 1rpx solid #eee;

			::v-deep .reviews-item {
				box-shadow: none;
				padding: 0;
				margin-bottom: 40rpx;
			}
		}

		.all-reviews {
			.btn-all {
				min-width: 228rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 98rpx 98rpx 98rpx 98rpx;
				border: 2rpx solid #E1E3E8;

				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #9695A3;
			}
		}
	}



	.sec-detail {
		margin-top: 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		overflow: hidden;

		.sec-title {
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 24rpx;
		}


		.detail-box {}
	}






	// 底部操作
	.page-foot {
		.grid-box {

			padding-right: 30rpx;

			.grid-item {
				position: relative;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.btn-kefu {
					position: absolute;
					opacity: 0;
					z-index: 2;
					left: 0;
					top: 0;
					right: 0;
					bottom: 0;
				}

				.icon-box {
					position: relative;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.icon {
						width: 36rpx;
						height: 36rpx;
					}

					.cart-number {
						position: absolute;
						z-index: 2;
						right: -20rpx;
						top: -20rpx;

						padding: 2rpx;
						min-width: 30rpx;
						background: #ff0000;
						color: #ffffff;
						border-radius: 50%;
						font-size: 20rpx;
					}
				}

				.title {
					font-size: 24rpx;
					color: #333;
				}
			}
		}



		.btns {
			flex: 1;
			overflow: hidden;

			.btn {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;

				&.btn-buy {
					width: 100%;
					height: 80rpx;
					background: #CB0011;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
				}


				&.btn-disabled {
					background: #DDDDDD;
				}

				&[disabled] {
					background: #DDDDDD;
				}
			}
		}


	}
</style>